import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './tmap.less';
import Map from '../components/TMap/Map';
function IndexPage({dispatch,tmap}) {
    const {
        mapPoints,
        mapLines,
        mapPolygons,
        mapCircles,
        setVisiblePoints,mapVisiblePoints,
        setCenter,mapCenter,
        setZoomLevel,mapZoomLevel,
        isOpenTrafficInfo,boundaryName,
        setCluster,mapCluster,
        isRangingTool,
        mapDraw,isDraw,isCloseDraw,
        mapRemove,isRemove,
        editGraphicId,isDoEdit,isEndEdit,
        isClearAll,
        isSetAreaRestriction,areaRestriction,isClearAreaRestriction
    } = tmap;
    function clickGraphic(obj) {
        console.log('点击:',obj);
    }
    function dragMapStart(obj) {
        console.log('拖拽开始:',obj);
    }
    function dragMapEnd(obj) {
        console.log('拖拽结束:',obj);
    }
    function moveStart(obj) {
        console.log('移动开始:',obj);
    }
    function moveEnd(obj) {
        console.log('移动结束:',obj);
    }
    function zoomStart(obj) {
        console.log('zoom开始:',obj);
    }
    function zoomEnd(obj) {
        console.log('zoom结束:',obj);
    }
    function mapRangingTool(obj) {
        console.log('测距回调',obj);
    }
    function mouseOverGraphic(obj){
        console.log('移入事件',obj);
    }
    function mouseOutGraphic(obj){
        console.log('移出事件',obj);
    }
    function drawEnd(obj){
        console.log('绘制结束',obj);
    }
    function clickMap(obj){
        console.log('点击地图',obj);
    }
    function editGraphicChange(obj) {
        console.log('编辑返回',obj);
        switch(obj.geometry.type){
            case 'point':
                dispatch({
                    type: 'example/editPoint',
                    payload: {
                        id: obj.id,
                        longitude: obj.geometry.x,
                        latitude: obj.geometry.y,
                    }
                });
            break;
            case 'polyline':
                dispatch({
                    type: 'example/editLine',
                    payload: {
                        id: obj.id,
                        paths: obj.geometry.paths[0]
                    }
                });
            break;
            case 'polygon':
                dispatch({
                    type: 'example/editPolygon',
                    payload: {
                        id: obj.id,
                        rings: obj.geometry.rings[0]
                    }
                });
            break;
            case 'circle':
                dispatch({
                    type: 'example/editCircle',
                    payload: {
                        id: obj.id,
                        longitude: obj.geometry.x,
                        latitude: obj.geometry.y,
                        radius: obj.geometry.radius
                    }
                });
            break;
        }
    }
    return (
        <div className={styles.normal}>
            <div className={styles.event}>
                <div onClick={()=>{dispatch({type:'tmap/addPoint'})}}>添加点</div>
                <div onClick={()=>{dispatch({type:'tmap/updatePoint'})}}>更新点</div>
                <div onClick={()=>{dispatch({type:'tmap/deletePoint'})}}>删除点</div>

                <div onClick={()=>{dispatch({type:'tmap/addLine'})}}>添加线</div>
                <div onClick={()=>{dispatch({type:'tmap/updateLine'})}}>更新线</div>
                <div onClick={()=>{dispatch({type:'tmap/deleteLine'})}}>删除线</div>

                <div onClick={()=>{dispatch({type:'tmap/addPolygon'})}}>添加面</div>
                <div onClick={()=>{dispatch({type:'tmap/updatePolygon'})}}>更新面</div>
                <div onClick={()=>{dispatch({type:'tmap/deletePolygon'})}}>删除面</div>
                <div onClick={()=>{dispatch({type:'tmap/addCircle'})}}>添加圆</div>
                <div onClick={()=>{dispatch({type:'tmap/updateCircle'})}}>更新圆</div>
                <div onClick={()=>{dispatch({type:'tmap/deleteCircle'})}}>删除圆</div>
                <br />
                <div onClick={()=>{dispatch({type:'tmap/visiblePoints'})}}>最优视野(线)</div>
                <div onClick={()=>{dispatch({type:'tmap/setCenter'})}}>设置中心点</div>
                <div onClick={()=>{dispatch({type:'tmap/setZoomLevel'})}}>设置zoom等级</div>
                {/*<div onClick={()=>{dispatch({type:'tmap/openTraffic'})}}>打开路况</div>
                <div onClick={()=>{dispatch({type:'tmap/hideTraffic'})}}>关闭路况</div>*/}
                <div style={{color:'#ff0000'}} onClick={()=>{alert('天地图没有路况功能!')}}>打开路况</div>
                <div style={{color:'#ff0000'}} onClick={()=>{alert('天地图没有路况功能!')}}>关闭路况</div>
                <div onClick={()=>{dispatch({type:'tmap/setCluster'})}}>设置点聚合</div>
                <div onClick={()=>{dispatch({type:'tmap/editRangingTool'})}}>开启测距工具</div>
                <br />
                <div onClick={()=>{dispatch({type:'tmap/drawPoint'})}}>绘制点</div>
                <div onClick={()=>{dispatch({type:'tmap/drawPolyline'})}}>绘制线</div>
                <div onClick={()=>{dispatch({type:'tmap/drawPolygon'})}}>绘制面</div>
                <div onClick={()=>{dispatch({type:'tmap/drawCircle'})}}>绘制圆</div>
                <div onClick={()=>{dispatch({type:'tmap/drawRectangle'})}}>绘制矩形</div>
                <div onClick={()=>{dispatch({type:'tmap/closeDraw'})}}>关闭绘制</div>

                {/*<div onClick={()=>{dispatch({type:'tmap/addBoundary'})}}>添加行政区划边界(高德数据)</div>
                <div onClick={()=>{dispatch({type:'tmap/deleteBoundary'})}}>删除行政区划边界(高德数据)</div>*/}
                <div style={{color:'#ff0000'}} onClick={()=>{alert('天地图没有该功能!')}}>添加行政区划边界(高德数据)</div>
                <div style={{color:'#ff0000'}} onClick={()=>{alert('天地图没有该功能!')}}>删除行政区划边界(高德数据)</div>
                <br />
                <div onClick={()=>{dispatch({type:'tmap/openEdit',payload:{id: 'p02'}})}}>开启编辑(点)</div>
                <div onClick={()=>{dispatch({type:'tmap/openEdit',payload:{id: 'line0'}})}}>开启编辑(线)</div>
                <div onClick={()=>{dispatch({type:'tmap/openEdit',payload:{id: 'g00'}})}}>开启编辑(面)</div>
                <div onClick={()=>{dispatch({type:'tmap/openEdit',payload:{id: 'c00'}})}}>开启编辑(圆)</div>
                <div onClick={()=>{dispatch({type:'tmap/closeEdit'})}}>关闭编辑</div>
                <br />
                <div onClick={()=>{dispatch({type:'tmap/clearAll'})}}>清空地图</div>
                <div onClick={()=>{dispatch({type:'tmap/removeGraphic'})}}>删除图元(绘制的图元)&nbsp;</div>
                <div onClick={()=>{dispatch({type:'tmap/removeGraphic'})}}>删除图元(正常图元[非绘制])&nbsp;</div>
                <br />
                <div onClick={()=>{dispatch({type:'tmap/changeAreaRestriction'})}}>切换限制显示区域&nbsp;</div>
                <div onClick={()=>{dispatch({type:'tmap/clearAreaRestriction'})}}>关闭限制显示区域&nbsp;</div>
            </div>
            <div className={styles.map}>
                <Map 
                    mapId='tmap'
                    mapLines={mapLines}
                    mapPoints={mapPoints}
                    mapPolygons={mapPolygons}
                    mapCircles={mapCircles}
                    setVisiblePoints={setVisiblePoints}
                    mapVisiblePoints={mapVisiblePoints}
                    setCenter={setCenter}
                    mapCenter={mapCenter}
                    isOpenTrafficInfo={isOpenTrafficInfo}
                    mapZoomLevel={mapZoomLevel}
                    setZoomLevel={setZoomLevel}
                    setCluster={setCluster}
                    mapCluster={mapCluster}
                    showControl={{type: 'all',location:'bl'}}
                    boundaryName={boundaryName}
                    clickGraphic={clickGraphic}
                    dragMapStart={dragMapStart}
                    dragMapEnd={dragMapEnd}
                    moveStart={moveStart}
                    moveEnd={moveEnd}
                    zoomStart={zoomStart}
                    zoomEnd={zoomEnd}
                    maxZoom={15}
                    minZoom={4}
                    isRangingTool={isRangingTool}
                    mapRangingTool={mapRangingTool}
                    mouseOverGraphic={mouseOverGraphic}
                    mouseOutGraphic={mouseOutGraphic}
                    mapDraw={mapDraw}
                    isDraw={isDraw}
                    isCloseDraw={isCloseDraw}
                    isClearAll={isClearAll}
                    drawEnd={drawEnd}
                    mapRemove={mapRemove}
                    isRemove={isRemove}
                    editGraphicId={editGraphicId}
                    isDoEdit={isDoEdit}
                    isEndEdit={isEndEdit}
                    editGraphicChange={editGraphicChange}
                    clickMap={clickMap}
                    areaRestriction={areaRestriction}
                    isSetAreaRestriction={isSetAreaRestriction}
                    isClearAreaRestriction={isClearAreaRestriction}
                /> 
            </div>
        </div>
    );
}



export default connect(
    ({tmap})=>({tmap})
)(IndexPage);
